<template>
  <div class="contain">
    <div class="left">
      <div class="nav">
        <nuxt-link to="/post" class="toIndex">旅游攻略</nuxt-link>/ 攻略详情
      </div>
      <h1>{{post.title}}</h1>
      <div class="watch" v-if="post.city">
        <span>攻略 : {{post.city.created_at}}</span>
        <span>阅读 : {{post.watch}}</span>
      </div>
      <PostDetail :post="post" />
      <el-row class="post-ctrl" type="flex" justify="center">
        <div class="ctrl-item" v-if="post.comments">
          <i class="iconfont iconpinglun"></i>
          <p>评论({{post.comments.length}})</p>
        </div>
        <div class="ctrl-item">
          <i class="iconfont iconstar1"></i>
          <p>收藏</p>
        </div>
        <div class="ctrl-item">
          <i class="iconfont iconfenxiang"></i>
          <p>分享</p>
        </div>
        <div class="ctrl-item">
          <i class="iconfont iconding"></i>
          <p>点赞(66)</p>
        </div>
      </el-row>

      <!-- 评论列表 -->
      <PostComments :id="postId" v-if="postId" />
    </div>
    <div class="right">
      <h4>相关攻略</h4>
      <div class="right-list">
        <div class="item" v-for="(item,index) in recommend" :key="index" @click="toDetail(item.id)">
          <el-row type="flex">
            <div class="img">
              <img :src="item.images[0]" alt />
            </div>
            <div class="item-right">
              <div class="text">{{item.title}}</div>
              <p class="time">{{item.updated_at | formatTime}} 阅读 {{item.watch || 0}}</p>
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PostDetail from "@/components/post/postDetail";
import PostComments from "@/components/post/postComments";
import moment from "moment";
export default {
  components: {
    PostDetail,
    PostComments
  },
  data() {
    return {
      post: "",

      postId: "",
      myComment: "", // 评论
      replyName: "", // 回复人
      recommend: [] // 推荐文章
    };
  },
  filters: {
    // 过滤器将时间戳转换成日期格式
    formatTime(val, format) {
      return moment(val).format(format || "YYYY-MM-DD HH:mm");
    }
  },
  mounted() {
    this.getPost(this.$route.query.id);
    // 获取推荐文章
    this.$axios({
      url: "/posts/recommend",
      params: {
        id: this.postId
      }
    }).then(res => {
      console.log(res);
      this.recommend = res.data.data;
    });
  },
  methods: {
    // 点击推荐文章跳转到详情
    toDetail(id) {
      this.$router.push(`/post/detail?id=${id}`);
      // 因为是组件内跳转,需刷新
      this.getPost(id);
    },
    // 获取文章详情
    getPost(id) {
      this.$axios({
        url: "/posts",
        params: {
          id
        }
      }).then(res => {
        this.post = res.data.data[0];
        this.postId = this.post.id;
      });
    },
    // 点击推荐文章跳转到详情
    toDetail(id) {
      this.$router.push(`/post/detail?id=${id}`);
      // 因为是组件内跳转,需刷新
      this.getPost(id);
    }
  }
};
</script>

<style lang="less" scoped>
.contain {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  .left {
    width: 700px;
    .nav {
      font-size: 14px;
      color: #606266;
      margin-right: 5px;
      .toIndex {
        font-weight: 600;
        &:hover {
          color: #40b8ff;
        }
      }
    }
    h1 {
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
    }
    .watch {
      color: #999;
      padding: 20px;
      text-align: right;
      span {
        margin-left: 20px;
      }
    }
    .post-ctrl {
      padding: 50px 0 30px;
      .ctrl-item {
        margin: 0 20px;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
        i {
          display: block;
          font-size: 28px;
          color: orange;
        }
        &:nth-child(2) i {
          transform: scale(1.4);
        }
        p {
          margin-top: 5px;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
.right {
  width: 280px;
  h4 {
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .right-list {
    .item {
      display: block;
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      .img {
        width: 100px;
        height: 80px;
        background: #ddd;
        overflow: hidden;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .item-right {
        flex: 1;
        position: relative;
        .text {
          // 多行省略
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        .time {
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>